<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    <title>登录</title>
</head>
<body>
<div>
    <div class="container-fluid">
        <div class="row" style="height:80px;">
        </div>
        <div class="row">
            <div class="col-sm-3"></div>
            <div class="col-sm-4">
                <form class="form-horizontal">


                    <div class="form-group">
                        <label for="username" class="col-sm-2 control-label">用户名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="username" id="username" placeholder="请输入名字">
                        </div>
                    </div>


                    <div class="form-group">
                        <label for="password" class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" name="password" id="password" placeholder="请输入密码">
                        </div>
                    </div>


                    <div class="form-group">
                        <div class="col-sm-offset-4 btn-group btn-group-default">
                            <button type="button" class="btn btn-primary" id="submit">登录</button>
                        </div>
                        <div class="col-sm-offset-2 btn-group btn-group-default">
                            <button type="button" class="btn btn-primary" id="register">注册</button>
                        </div>
                    </div>

                </form>
            </div>
            <div class="col-sm-5"></div>

        </div>
    </div>
</div>

</body>
<script>

    $(document).ready(function(){
        $("#submit").click(function(){
            login();
        });
        $("#register").click(function(){
            window.location.href="register.html";
        });
    });

    function login()
    {
        let username=$("#username").val()
        let password=$("#password").val();
        console.log("username",username);
        console.log("password",password);
        $.ajax({
            type: "POST",
            url: "index.php",
            data: {"username":username, "password": password, "purpose":0},
            dataType: "text",
            success: function(data)
            {   //返回值
                console.log("data",data)
                let obj = JSON.parse(data);
                let response = obj.status;
                console.log("response",response);
                if(response == "0")
                {//登录成功
                    console.log("登录成功");
                    sessionStorage.setItem("user",data);
                    window.location.href="main1.html";

                }
                else if(response == "1")
                {//登录失败，因为密码错误
                    alert("密码错误");
                    console.log("failed log in because of wrong password!!");
                }
                else if(response == "2")
                {//登录失败，因为用户不存在
                    alert("用户不存在");
                    console.log("failed log in because of unexisted user!!");
                }
            },
            error: function(jqXHR,textStatus,errorThrown)
            {
                console.log(jqXHR);
                console.log(textStatus);
                console.log(errorThrown)
            }
        });
    }

</script>
</html>